<template>
    <el-form>
        <el-form-item label="商品分类:" required>
            <el-cascader :options="productCategoryList" clearable @change="handleChange"
                :props="{ label: 'name', value: 'id', children: 'children' }" v-model="productCategoryId"
                placeholder="请选择分类">
            </el-cascader>
        </el-form-item>
        <el-form-item label="商品名称:" required>
            <el-input v-model="form1.name" />
        </el-form-item>
        <el-form-item label="副标题:" required>
            <el-input v-model="form1.subTitles" />
        </el-form-item>
        <el-form-item label="商品品牌:" required>
            <el-select v-model="form1.brandId" placeholder="请选择品牌" clearable>
                <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="商品介绍:">
            <el-input v-model="form1.description" />
        </el-form-item>
        <el-form-item label="商品货号:">
            <el-input v-model="form1.productSn" />
        </el-form-item>
        <el-form-item label="商品售价:">
            <el-input v-model="form1.price" />
        </el-form-item>
        <el-form-item label="市场价:">
            <el-input v-model="form1.originalPrice" />
        </el-form-item>
        <el-form-item label="商品库存:">
            <el-input v-model="form1.stock" />
        </el-form-item>
        <el-form-item label="计量单位:">
            <el-input v-model="form1.unit" />
        </el-form-item>
        <el-form-item label="商品重量:">
            <div style="display: flex;"><el-input v-model="form1.weight" style="width: 300px;" /><span
                    style="margin-left: 20px;">克</span></div>
        </el-form-item>
        <el-form-item label="排序:">
            <el-input v-model="form1.sort" />
        </el-form-item>
        <div style="justify-content: center;width: 100%;display: flex;">
            <el-button type="primary">下一步，填写商品促销</el-button>
        </div>
    </el-form>
</template>
    
<script setup lang='ts'>
import { reactive } from 'vue';
import { ref } from 'vue';
import { ApiGetBrandListAll, ApiGetProductCategoryWithChildren } from '../api';
// 商品分类
const productCategoryList = ref<IProductCategoryWithChildren[]>();
// 获取商品分类
ApiGetProductCategoryWithChildren().then(res => {
    if (res.code == 200) productCategoryList.value = res.data
})
const productCategoryId = ref()
// 分类选择改变时
const handleChange = () => {
    form1.productCategoryId = productCategoryId.value[productCategoryId.value.length - 1]
    productCategoryList.value?.forEach(i => {
        if (i.id === form1.productCategoryId) { form1.productCategoryName = i.name }
        else {
            i.children.forEach(c => {
                if (c.id === form1.productCategoryId) {
                    form1.productCategoryName = c.name
                }
            })
        }
    })
    // console.log(form1.productCategoryName);
}
// 品牌分类
const brandList = ref<IBrandList[]>([]);
// 获取品牌分类
ApiGetBrandListAll().then(res => {
    if (res.code == 200) {
        brandList.value = res.data
    }
})
// form1参数
const form1 = reactive({
    productSn: '',//货号
    weight: 0,//重量
    productCategoryId: 0,//分类id
    productCategoryName: '',//分类名称
    name: '',//商品名称
    subTitles: '',//副标题
    unit: '',//计量单位
    note: '',//商品备注
    price: 0,//商品售价
    description: '',//商品介绍
    originalPrice: 0,//市场价
    stock: 0,//库存
    sort: 0,//排序
    brandId: 0,//品牌id
})


</script>
    
<style>

</style>